// eslint-disable-next-line
import React, { memo, useEffect } from 'react'
import {HomeWrapper} from './style'
import HomeBanner from './c-cpns/home-banner'
import HomeLongfor from './c-cpns/home-longfor'
import HomeSectionV1 from './c-cpns/home-section-v1'
import HomeSectionV2 from './c-cpns/home-section-v2'
import HomeSectionV3 from './c-cpns/home-section-v3'
import { shallowEqual, useSelector, useDispatch } from 'react-redux'
import { fetchHomeDataAction } from '@/store/module/home'
import { isEmptyObj } from '@/utils'


const Home = memo(() => {
  // 从redux中获取数据
  // 等价于state.home
  // ({
  //   // goodPriceInfo: state.home.goodPriceInfo,
  //   // highScoreInfo: state.home.highScoreInfo,
  //   // discountInfo: state.home.discountInfo,
  //   // recommendInfo: state.home.recommendInfo
  // })
  const { 
    goodPriceInfo, 
    highScoreInfo, 
    discountInfo, 
    recommendInfo,
    longforInfo,
    plusData } = useSelector(state => state.home, shallowEqual)

  // 派发异步事件：发送网络请求
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(fetchHomeDataAction('xxx'))
  }, [dispatch])

  return (
    <HomeWrapper>
      <HomeBanner />
      <div className="content">
        {/* 仅当有值时才渲染组件 */}
        { isEmptyObj(longforInfo) && <HomeLongfor infoData={longforInfo} />}
        { isEmptyObj(discountInfo) && <HomeSectionV2 infoData={discountInfo} />}
        { isEmptyObj(recommendInfo) && <HomeSectionV2 infoData={recommendInfo} />}
        { isEmptyObj(goodPriceInfo) && <HomeSectionV1 infoData={goodPriceInfo} />}
        { isEmptyObj(highScoreInfo) && <HomeSectionV1 infoData={highScoreInfo} />}
        { isEmptyObj(plusData) && <HomeSectionV3 infoData={plusData} />}
      </div>
    </HomeWrapper>
    
  )
})

export default Home